<template>
  <div class="header">
    <div class="headerLeft">
       <img src="@/assets/img/heima.png" alt=""/>
       <span>电商后台管理系统</span>
    </div>
    <div class="headerRight">
       <el-button type="info" @click="logout">退出</el-button>
    </div>
  </div>

  <!-- 内容部分 -->
  <div class="content">
    <!-- 左侧menu导航部分 -->
    <div class="contentLeft" :style="{width: '200px'}">
      <el-menu :default-active="menuPath" :router="true" :unique-opened="true">
        <el-sub-menu v-for="(item, index) in menu" :index="item.id + ''" :key="item.id">
          <template #title>
            <el-icon>
              <component :is="icon[index]"></component>
            </el-icon>
            <span>{{item.authName}}</span>
          </template>

          <el-menu-item v-for="childItem in item.children" :index="childItem.path" :key="childItem.id" @click="menuClick">{{childItem.authName}}</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

    <!-- 右侧子组件内容 -->
    <div class="contentRight">
      <router-view v-slot="{ Component }">
        <keep-alive :exclude="[]">
          <component :is="Component"/>
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, shallowRef } from 'vue'
import { GetMenu } from '@/api/menu'
import { User, Grape, Orange, Burger, Food } from '@element-plus/icons-vue'
import { Users } from '@/pinia/store'
import { removeCookie } from '@/utils/cookie'
import { useRouter } from 'vue-router'
import type { itemType } from './type'
import { MenuActivePath } from '@/pinia/store'
import { storeToRefs } from 'pinia'

const { saveToken } = Users()
const { savePath } = MenuActivePath()
const store = MenuActivePath()
const { menuPath } = storeToRefs(store)
const menu = ref<itemType[]>([]) // menu菜单
const icon = shallowRef([User, Grape, Orange, Burger, Food]) // icon组件
const router = useRouter()

// 数据初始化
onMounted(async () => {
  const res = await GetMenu()
  menu.value = res.data.data
})

// 退出
const logout = () => {
  ElMessage({type: 'success', message: '退出成功', duration: 1000, onClose: () => {
    saveToken(null)
    removeCookie('token')
    router.push('/login')
  }})
}

// 点击menu-item 保存菜单当前激活项 放在pinia里面 让数据持久化 刷新也不会丢失
const menuClick = (item: {index: string}) => {
  savePath(item.index)
}

</script>

<style lang="scss" scoped>
.header{
   width: 100%;
   height: 60px;
   padding: 0 20px;
   display: flex;
   background: #373D41;
   justify-content: space-between;
   box-sizing: border-box;
   align-items: center;
   overflow: hidden;
   .headerLeft{
    display: flex;
    align-items: center;
    span{
      color: #fff;
      margin-left: 15px;
    }
   }
}
.content{
  display: flex;  
  .contentLeft{
    height: 100vh;
    overflow: hidden;
    background-color: #333744;
    ::v-deep .el-menu{
      border: none;  
      background-color: #333744;
      .el-sub-menu__title, .el-menu-item{
        color: #fff;
       }
       .el-sub-menu__title:hover, .el-menu-item:hover{
         background-color: #ccc;
       }
       .is-active{
        color: skyblue;
       }
    }
  }
  .contentRight{
    flex: 1;
    background-color: #eaedf1;
    padding: 20px;
    overflow: hidden;
  }
}
</style>